<%--
  Created by IntelliJ IDEA.
  User: 陌·笙
  Date: 2018-12-07
  Time: 10:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
    <jsp:include page="../comm/tag.jsp"></jsp:include>
    <style>
        #container{height:400px; width: 550px}
    </style>
    <script>
        $(function(){
            $("#mytable").bootstrapTable({
                url:"/role/showfirm",
                pagination:true,
                height:410,
                pageSize:5,
                search:true,
                /*toolbar:'#tool',*/
                columns:[
                    {
                      field:"firmId",
                        title:"编号",
                        align:"center"
                    },
                    {
                        field:"firmName",
                        title:"厂商名称",
                        align:"center"
                    },
                    {
                        field:"firmIphone",
                        title:"厂商电话",
                        align:"center"
                    },
                    {
                        field:"firmlAddress",
                        title:"厂商地址",
                        align:"center"
                    },
                    {
                        title:"操作",
                        align:"center",
                        formatter:function (value,row,index) {
                            return "<button class='btn btn-primary' onclick='show(\""+row.firmlAddress+"\",\""+row.firmName+"\")'>位置</button>"
                        }
                    }

                ]
            });
            $("#shop").bootstrapTable({
                url:"/role/showShop?firmId=kk",
                pagination:true,
                height:383,
                pageSize:6,
                search:true,
                columns:[
                    {
                        field:"shopid",
                        title:"商品编号",
                        align:"center"
                    },
                    {
                        field:"firm.firmName",
                        title:"厂商名称",
                        align:"center"

                    },
                    {
                        field:"shopName",
                        title:"商品名称",
                        align:"center"
                    },
                    {
                        field:"type.iptypeName",
                        title:"手机类别",
                        align:"center"
                    },
                    {
                        field:"shopType",
                        title:"商品型号",
                        align:"center"
                    },
                    {
                        field:"shopcolor",
                        title:"商品颜色",
                        align:"center"
                    },
                    {
                        field:"shopprice",
                        title:"商品卖价",
                        align:"center"
                    },
                    {
                        title:"操作",
                        align:"center",
                        formatter:function (value,row,index) {
                            return "<button class=\"btn btn-danger\" onclick=\"shows('"+index+"')\" > <span class=\"glyphicon glyphicon-wrench\"></span>&nbsp;&nbsp;修改</button>"
                        }
                    }
                ]
            })
        });
        function show(address,name) {
            var map = new BMap.Map("container");
            // 创建地址解析器实例
            var myGeo = new BMap.Geocoder();
            map.enableScrollWheelZoom();   //启用滚轮放大缩小，默认禁用
            // 将地址解析结果显示在地图上，并调整地图视野
            myGeo.getPoint(address, function(point){
                    if (point) {
                        map.centerAndZoom(point, 16);
                        map.addOverlay(new BMap.Marker(point));
                    }
                    var marker = new BMap.Marker(point);  // 创建标注
                    map.addOverlay(marker);              // 将标注添加到地图中
                    map.centerAndZoom(point, 15);
                    var opts = {
                        width : 100,     // 信息窗口宽度
                        height: 50,     // 信息窗口高度
                        title : name , // 信息窗口标题
                        enableMessage:true,//设置允许信息窗发送短息
                        message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
                    }
                    var infoWindow = new BMap.InfoWindow("地址:"+address, opts);  // 创建信息窗口对象
                    marker.addEventListener("click", function(){
                        map.openInfoWindow(infoWindow,point); //开启信息窗口
                    });
                },
                "北京市");
            $("#modal-id").modal('show');

        }
    </script>
</head>
<body>

<div style="margin-left: 50px;margin-right: 50px">
    <table id="mytable" class="table-striped"></table><%--厂商信息--%>
    <div class="modal fade" id="modal-id">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">具体地址</h4>
                </div>
                <div class="modal-body">
                    <div id="container"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- 厂商地址信息 -->
    <table id="shop" class="table-striped"></table><%--厂商商店信息--%>
    <div class="modal inmodal" id="myups" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content animated bounceInRight">
                <div class="modal-header">
                    </button>
                    <i class="fa fa-laptop modal-icon"></i>
                    <h4 class="modal-title">录入信息</h4>
                    <small class="font-bold">进货商品录入信息</small>
                </div>
                <div class="modal-body">
                    <form action="" method="post" role="form" id="myforms" class="form-horizontal">
                        <div class="form-group" style="font-size: 15px">
                            <div class="col-md-4">
                                <label for="">商品名称:</label>
                                <label for="" id="shopNames">oppoK1</label>
                            </div>
                            <div class="col-md-4">
                                <label for="">商品型号:</label>
                                <label for="" id="shopTypes">4G+128</label>
                            </div>
                            <div class="col-md-4">
                                <label for="">商品颜色:</label>
                                <label for="" id="shopcolors">黑色</label>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-md-2" style="text-align: center">价格:</label>
                            <div class="col-md-10">
                                <input type="text" name="prices" class="form-control">
                                <input type="hidden" name="firmId" class="form-control">
                                <input type="hidden" name="shopIds" class="form-control">
                                <input type="hidden" name="tableId" class="form-control">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white closes">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="xiugaiprice()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {//修改框
        $(".closes").on("click",function () {
            //关闭对话框
            $("#myups").modal('hide');
        })
    });
    function shows(index){
        $('#myforms')[0].reset();
        if($("[name='tableId']").val()!=''){
            $("#shop").bootstrapTable("uncheck",$("[name='tableId']").val());//取消选中
        }
        $("#shop").bootstrapTable("check",index);//根据索引让该行选中
        var a=$("#shop").bootstrapTable("getSelections")[0];
        $("#shopNames").html(a.shopName);
        $("#shopTypes").html(a.shopType);
        $("#shopcolors").html(a.shopcolor);
        $("[name='firmId']").val(a.firm.firmId);
        $("[name='shopIds']").val(a.shopid);
        $("[name='prices']").val(a.shopprice);
        $("[name='tableId']").val(index);
        $("#myups").modal('show');
    }
    function xiugaiprice(){
        var firmId=$("[name='firmId']").val();
        var shopId=$("[name='shopIds']").val();
        var price=$("[name='prices']").val();
        $.ajax({
            url:"/shop/upshopprice",
            type:"get",
            data:{"price":price,"shopId":shopId,'firmId':firmId},
            success:function(data){
                $("#shop").bootstrapTable("load",data);
                $("#myups").modal('hide');
            }
        })
    }
</script>
<%--双击事件--%>
<script>
    // 双击表格一行事件
    $(document).on('dblclick', '#mytable tbody tr', function () {
        // 当前的tr
        var trElem = $(this);
        // 当前tr的index
        var index = trElem.data('index');
        // 找到这个table的view
        var tableView = trElem.parents('#mytable').first();
        // do something
        var firmId=$(this).children().eq(0).html();//获取到厂商编号
        $.ajax({
            type:"get",
            url:"/role/showShop",
            data:{"firmId":firmId},
            success:function (data) {
                 $("#shop").bootstrapTable("load",data);
            }
        })

    });
</script>
</body>
</html>
